<template>
    <div class="goods-evaluate">
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="评论"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="commentList"
            @pullup="loadMore"
        >
            <!-- <div class="evaluate-nav-box">
                <span
                    class="nav-item"
                    v-for="(item,index) of evaluateNavList"
                    :key="index"
                    :class="evaluateNav == index?'active':''"
                    @click="checkoutNav(index)"
                >{{item}}</span>
            </div> -->
            <div
                class="comment-empty-tips"
                v-if="commentList.length == 0"
            >{{emptyTips}}</div>

            <div class="evaluate-list">
                <div
                    class="evaluate-item"
                    v-for="(item,index) of commentList"
                    :key="index"
                >
                    <div class="user-header">
                        <img :src="item.face" />
                    </div>
                    <div class="evaluate-info">
                        <div class="user-name-date">
                            <span class="user-name">{{item.nick_name}}</span>
                            <span class="evaluate-date">{{item.add_time}}</span>
                        </div>
                        <div class="evaluate-detail">{{item.content}}</div>
                        <swiper :options="swiperOption">
                            <swiper-slide
                                v-for="(imgItem,imgIndex) of item.imgs"
                                :key="imgIndex"
                            >
                                <img
                                    :src="imgItem.title_img"
                                    @click="previewImgList(item.imgs,imgIndex)"
                                >
                            </swiper-slide>
                        </swiper>
                    </div>
                </div>
            </div>
        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import wx from 'weixin-js-sdk'
export default {
    name: 'GoodsEvaluate',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            swiperOption: {
                slidesPerView: 'auto',
                spaceBetween: 10
            },
            commentList: [],
            nowPage: 1,
            totalPage: 1,
            isLoading: false,
            emptyTips: '正在全力加载中...'
        }
    },
    mounted() {
        this.getCommentList()
    },
    methods: {
        getCommentList() {
            this.isLoading = true
            let postData = this.qs.stringify({
                goods_id: this.$route.query.goodsId,
                page_size: 10,
                page: this.nowPage
            })
            this.axios
                .post('/api/goods/comment_list.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        if (data.data.list.length == 0) {
                            this.emptyTips = '暂无评论'
                        }
                        this.commentList = this.commentList.concat(
                            data.data.list
                        )
                        this.totalPage = Math.ceil(
                            data.data.page_info.total / 10
                        )
                        this.nowPage++
                        this.isLoading = false
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        previewImgList(imgs, index) {
            const that = this
            this.previewImg = []
            imgs.forEach(item => {
                that.previewImg.push(item.title_img)
            })
            wx.previewImage({
                current: this.previewImg[index], // 当前显示图片的http链接
                urls: this.previewImg // 需要预览的图片http链接列表
            })
        },
        checkoutNav(index) {
            this.evaluateNav = index
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getCommentList()
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.evaluate-nav-box
    display flex
    align-items center
    height 1.35rem
    padding 0 0.33rem
    background #fff
    border-bottom 1px solid #e5e5e5
    .nav-item
        width 1.22rem
        height 0.72rem
        line-height 0.72rem
        text-align center
        background #ffdddc
        font-size 0.33rem
        color #999
        border-radius 15px
        margin-right 0.22rem
    .active
        background #d7463c
        color #fff
.comment-empty-tips
    height 2rem
    line-height 2rem
    text-align center
    font-size 0.33rem
    color #999
.evaluate-list
    background #fff
    padding-left 0.72rem
    .evaluate-item
        display flex
        align-items top
        padding 0.38rem 0.33rem
        border-bottom 1px solid #e5e5e5
        .user-header
            width 1.11rem
            height 1.11rem
            overflow hidden
            border-radius 100%
            img
                width 100%
                height 100%
        .evaluate-info
            flex 1
            min-width 1px
            margin-left 0.4rem
            .user-name-date
                display flex
                align-items center
                justify-content space-between
                .user-name
                    flex 1
                    font-size 0.33rem
                    color #666
                    line-height 1.2
                    white-space nowrap
                    overflow hidden
                    text-overflow ellipsis
                .evaluate-date
                    margin-left 0.2rem
                    font-size 0.33rem
                    color #949494
            .evaluate-detail
                margin-top 0.22rem
                margin-bottom 0.22rem
                font-size 0.38rem
                color #333
                line-height 1.5
        .swiper-slide
            width 1.85rem
            height 1.85rem
        .swiper-slide img
            width 100%
            height 100%
    .evaluate-item:last-child
        border none
</style>

